import React from 'react';
import { ScrollView, TouchableHighlight, StyleSheet, Image, Text, View, ScrolView } from 'react-native';
import { SharedElementTransition } from 'react-native-navigation';

const IMAGE_HEIGHT = 190;

class CardScreen extends React.Component {

    goToCard = (index) => {
        this.props.navigator.push({
            screen: 'example.Transitions.SharedElementTransitions.Cards.Info',
            sharedElements: [`image${index}`],
            animated: false,
            overrideBackPress: true,
            passProps: {
                sharedImageId: `image${index}`
            }
        })
    };

    _renderCard(index) {
        return (
            <View style={styles.cardContainer}>
                <TouchableHighlight
                    underlayColor={'rgba(0, 0, 0, 0.054)'}
                    onPress={() => this.goToCard(index)}
                >
                    <View>
                        {this._renderImage(index)}
                        {this._renderCardContent()}
                    </View>
                </TouchableHighlight>
            </View>
        );
    }

    _renderImage(index) {
        return (
            <SharedElementTransition
                style={styles.imageContainer}
                sharedElementId={`image${index}`}
            >
                <Image
                    style={styles.image}
                    source={require('../../../../../img/beach.jpg')}
                />
            </SharedElementTransition>
        );
    }

    _renderCardContent() {
        return (
            <View style={styles.cardContentContainer}>
                <Text style={styles.title}>This is a title</Text>
                <Text>This is a very long long long long long long long long long long content</Text>
            </View>
        );
    }

    render() {
        return (
            <ScrollView
                style={styles.container}
                contentContainerStyle={styles.content}
            >
                {this._renderCard(0)}
                {this._renderCard(1)}
                {this._renderCard(2)}
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    content: {
        marginHorizontal: 8,
    },
    cardContainer: {
        marginVertical: 8,
        elevation: 2,
        borderRadius: 2,
        backgroundColor: '#F5F5F5'
    },
    imageContainer: {
        justifyContent: 'flex-start'
    },
    image: {
        height: IMAGE_HEIGHT,
        borderTopLeftRadius: 2,
        borderTopRightRadius: 2
    },
    cardContentContainer: {
        padding: 8
    },
    title: {
        fontWeight: '500',
        paddingBottom: 8,
        fontSize: 17
    },
});

export default CardScreen;
